<script setup lang="ts">
import { ref } from "vue";
import { usePublicHooks } from "@/views/hooks";
import { download } from "@/api/parking_record/download";

import Refresh from "@iconify-icons/ep/refresh";
const { timeFrame } = usePublicHooks();
import { message } from "@/utils/message";

defineOptions({
  name: "parkingRecordDownLoad"
});

const formRef = ref();

const out_time = ref();
//下载方法实现
function handleDownload(title) {
  if (!out_time.value) {
    message("请选择实际出场时间");
    return;
  }
  download({ out_time: out_time.value }).then(res => {
    try {
      // 调用 downRequest 请求文件
      // 创建下载链接
      const url = window.URL.createObjectURL(new Blob([res]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "停车记录导出.xlsx"); // 设置默认文件名
      document.body.appendChild(link);
      link.click();
      // 清理 URL 对象
      window.URL.revokeObjectURL(url);
    } catch (error) {
      console.error("下载失败:", error);
    }
  });
}
</script>

<template>
  <div>
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
      :header-cell-style="{
        background: 'var(--el-fill-color-light)',
        color: 'var(--el-text-color-primary)'
      }"
    >
      <el-form-item label="实际出场时间" class="!w-[40%]">
        <el-date-picker
          v-model="out_time"
          type="datetimerange"
          :shortcuts="timeFrame"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          range-separator="至"
          start-placeholder="开始日期时间"
          end-placeholder="结束日期时间"
          :popper-options="{
            placement: 'bottom-start'
          }"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :loading="loading" @click="handleDownload">
          导出
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
